<template>
  <q-tab-panel class="flex items-center justify-center">
    <modify-order ref="modifyOrder" @refresh="getPreview" modify/>
    <div v-if="orderPreview.length === 0" class="text-center text-grey-7">
      <q-icon name="sentiment_dissatisfied" size="10rem"/>
      <div class="text-h4">当前自动分单配置下没有订单可以分配给机器人</div>
    </div>
    <q-table
      v-else
      title="预览列表"
      class="no-border-radius sticky-header-table full-height full-width"
      :rows="orderPreview"
      :columns="columns"
      row-key="id"
      :pagination="{ rowsPerPage: 100 }"
    >
      <template v-slot:body="props">
        <q-tr :props="props" @click="modifyOrder.show(props.row)">
          <q-td v-for="item in columns" v-bind:key="item.name" :props="props" class="text-center">
            {{ props.row[item.name] }}
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </q-tab-panel>
</template>

<script>
import { onMounted, ref } from 'vue'
import { api } from 'boot/axios.js'
import { useAPIStore } from 'stores/api/index.js'
import ModifyOrder from 'components/transport/orders/ModifyOrder.vue'
import { useQuasar } from 'quasar'

const columns = [
  { label: '优先度', name: 'priority', field: 'priority', sortable: true, align: 'center' },
  { label: '订单状态', name: 'status', field: 'status', sortable: true, align: 'center' },
  { label: '设备类型', name: 'type', field: 'type', align: 'center' },
  { label: '设备型号', name: 'model', field: 'model', align: 'center' },
  { label: '执行设备', name: 'deviceID', field: 'deviceID', align: 'center' }
]

export default {
  name: 'OrderAssignPreview',
  components: { ModifyOrder },
  setup () {
    const $q = useQuasar()
    const orderPreview = ref([])
    function getPreview () {
      api.get(useAPIStore().orderUrl + 'automate/preview').then(rs => {
        orderPreview.value = rs.data
        $q.notify({ message: '共有' + rs.data.length + '条订单会被分配', type: 'info', position: 'top' })
      })
    }

    onMounted(getPreview)

    return {
      modifyOrder: ref(),
      orderPreview,
      columns,
      getPreview
    }
  }
}
</script>
